<template>
  <div ref="echartsRef" :style="{ width: '100%', height: '100%' }"></div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue';
import * as echarts from 'echarts';
import 'echarts-liquidfill';

const props = defineProps({
  title: {
    type: String
  },
  ecahrtsData: {
    type: Object
  },
  value: {
    type: Number
  }
});

const echartsRef = ref(null);
const myChart = ref(null);

const drawLine = (data) => {
  if (!echartsRef.value) return;

  // 初始化或更新图表
  if (!myChart.value) {
    myChart.value = echarts.init(echartsRef.value);
  }

  const option = {
    grid: {
      top: '0',
      left: '0',
      right: '0',
      bottom: '0'
    },
    title: {
      text: (data.holderPercentage * 100).toFixed(2) + '%',
      textStyle: {
        fontSize: 16,
        fontWeight: 'normal',
        color: '#ffffff',
        rich: {
          a: {
            fontSize: 16
          }
        }
      },
      x: 'center',
      y: '40%'
    },
    series: [
      {
        type: 'liquidFill',
        radius: '80%',
        center: ['50%', '50%'],
        data: [data.holderPercentage],
        backgroundStyle: {
          borderColor: 'rgba(0,150,255,0.4)',
          color: 'rgba(0,150,255,0.4)'
        },
        outline: {
          borderDistance: 0,
          itemStyle: {
            borderWidth: 13,
            borderColor: 'rgba(0,150,255,0.2)'
          }
        },
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 1,
              color: '#27ceed'
            },
            {
              offset: 0.3,
              color: '#ffe063'
            }
          ],
          globalCoord: false
        },
        label: {
          normal: {
            formatter: ''
          }
        }
      }
    ]
  };

  myChart.value.setOption(option);
};

// 初始化图表
onMounted(() => {
  drawLine(props.ecahrtsData);
});

// 监听数据变化
watch(
  () => props.ecahrtsData,
  (newVal) => {
    drawLine(newVal);
  },
  { deep: true }
);
</script>
